{% extends 'base.html' %}
{% block content %}
    <input class="background-image" type="hidden" value="{{ background }}">
    <div class="book-designation">
        <a href="{% url 'author:author' name_slug=author_slug %}">{{ author }}</a>
        <span>/</span>
        <a href="{% url 'book' slug=book_slug %}">{{ title }}</a>
        <span>
            {% if is_favorites %}
                <i class="fa-solid fa-star color-active-favorites" style="font-weight: 100;"></i>
            {% else %}
                <i class="fa-solid fa-star color-inactive-favorites" style="font-weight: 100;"></i>
            {% endif %}
        </span>
    </div>
    <div class="menu">
        <div class="appearance">
            <div class="hide-sidebar" data-status-sidebar="false">
                <span>Скрыть меню</span>
                <i class="fa-solid fa-xmark"></i>
                <i class="fa-solid fa-check" style="display: none"></i>
            </div>
            <div class="font-size">
                <span>Размер шрифта</span>
                <i class="fa-solid fa-plus"></i>
                <i class="fa-solid fa-minus"></i>
                <i class="fa-solid fa-arrow-rotate-left"></i>
            </div>
            <div class="background-color">
                <span>Фон</span>
                <span class="first-color"></span>
                <span class="second-color"></span>
                <span class="third-color"></span>
            </div>
        </div>
        <div class="pagination">
            <div class="page-entry">
                <input type="text" placeholder="0" data-page-number>
                <div class="open-page" data-open-page>
                    <i class="fa-solid fa-magnifying-glass"></i>
                </div>
            </div>
            {% if previous_page %}
            <a href="{% url 'book' slug=book_slug %}?page={{ previous_page }}&update=true" class="previous-page" data-previous-page>{{ previous_page }}</a>
            {% endif %}
            <a  class="current-page">{{ page_number }}</a>
            <a href="{% url 'book' slug=book_slug %}?page={{ next_page }}&update=true" class="next-page" data-next-page>{{ next_page }}</a>
            <a href="#">...</a>
            <a href="#" data-total-page>{{ total_pages }}</a>
        </div>
        <form method="post" name="bookmark">
            {% csrf_token %}
            <button type="submit" class="bookmark" data-bookmark="false">
                <i class="fa-solid fa-bookmark
                    {% if bookmark == page_number and bookmark != 0 %} color-active-bookmark {% endif %}
                    "
                ></i>
            </button>
        </form>
            
    </div>
    <div class="content-of-book">
        <div class="move-page" data-previous-page>
            <i class="fa-solid fa-chevron-left"></i>
        </div>
        <p class="text">
            {{ text }}
        </p>
        <div class="quote">
            <form name="form-for-quote" class="quote-actions">
                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                <button type="submit" data-add-quote="true">
                    Добавить цитату
                </button>
                <div class="quote-colors">
                    <span class="quote-color quote-pink" data-choose-color></span>
                    <span class="quote-color quote-orange" data-choose-color></span>
                    <span class="quote-color quote-blue" data-choose-color></span>
                    <span class="quote-color quote-green" data-choose-color></span>
                    <span class="quote-color quote-yellow" data-choose-color></span>
                </div>
                <span class="close-quote">&times;</span>
            </form>
            <textarea name="note" cols="30" rows="5" placeholder="Указать примечание"></textarea>
        </div>
        <div class="move-page" data-next-page>
            <i class="fa-solid fa-chevron-right"></i>
        </div>

    </div>

{% endblock content %}